@import '@/lib/reset.scss';
*{margin: 0; padding: 0}

.songlistNav-box {
    @include rect(1200px, 100%);
    // background: #00f;
    @include margin(0 auto);
    ::after{
        content: '.'; clear: both; display: block; height: 0; overflow: hidden; visibility: hidden;
    }
    .songlistNav-nav {
        @include rect(100%, 100%);
        // background: #f00;
        @include padding(60px 0 32px);     
        ul {
            @include rect(226px, 100px);
            // width: 225px;
            // background: #0f0;
            float: left;
            @include margin(0 22px 0 0);
            border-right:1px solid #ccc; 
            h2 {
                @include rect(100%, 25px);
                // background: #ff0;
                float: left;
                line-height: 25px;
                @include text-color(#999);
                @include padding(0 0 0 8px);
                @include margin(-6px 0 8px);
            }
            li {
                @include rect(75px, 25px);
                // background: #0ff;
                float: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                @include text-color(#000);
                .songlistNav-span {
                    display: inline-block;
                    line-height: 25px;           
                    @include padding(0 8px);
                    cursor: pointer;
                    // background: #f00;
                    .songlist-more {
                        @include padding(0 0 0 8px);
                    }
                    .icon-unfold {
                        font-size: 14px;                
                    }
                    &:hover {
                        @include text-color(#31c27c);
                    }
                }
                .active {
                    background: #31c27c;
                    @include text-color(#fff);
                    &:hover {
                      @include text-color(#fff);
                    }
                }               
            }
        }
        ul:nth-child(1) {
            @include rect(151px, 100px);
        }
        ul:nth-child(5) {
            border-right:0;
        }
    }
    
//歌曲分类的框框
  .part_songlist_hd {
    @include rect(100%, 60px);
    // background: #0f0; 
    .part_songlist_h2 {
      position: absolute;
      z-index: 1;
      line-height: 58px;
      font-size: 22px;
      font-weight: 500;
      float: left;
      display: block
    }
    .part_songlist__type {
      @include padding(0 25px 0 10px);
      @include margin(8px 6px 0 0);
      float: left;
      line-height: 38px;
      border-radius: 4px;
      font-size: 14px;
      border: 1px solid #c9c9c9;
      display: none;
      position: relative;
      z-index: 2;
      .icon-close_light {
        // background: #0ff;
        @include rect(18px, 18px);
        font-size: 16px;
        line-height: 18px;
        text-align: center;
        position: absolute;
        top: 10px;
        right: 2px;
        cursor: pointer;
        border-radius: 50%;
        &:hover {
          background: rgba($color: #fff, $alpha: 0.5)
        }
      }
      &:hover {
        background: #31c27c;
        @include text-color(#fff)
      }
    }
  }
}